<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>夺冠</title>
    <style>
        .room{
            width: 630px;
            height: 400px;
            margin: 0 auto;
            border: 2px solid #cccccc;
        }

        .screen{
            width: 300px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border: 1px solid #e5e5e5;
            margin:5px auto;
        }
        .seat-wrap{
            width: 95%;
            margin: 0 auto ;
        }

        .seat{
            width: 93px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            float: left;
            margin:3px 3px;
            background-color: pink;
            font-size: 10px;
        }
    </style>
</head>
<body>
<div>
   <div class="room">
       <div class="screen">
           屏幕中央
       </div>
       <div class="seat-wrap">
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>
           <div class="seat"></div>

       </div>
   </div>

    <script>
        let seats=document.getElementsByClassName('seat')
        for (var i = 0; i < seats.length; i++) {
            seats[i].selected=false;
        }

        for (var i = 0; i < seats.length; i++) {
            seats[i].onclick=function () {
                if (this.selected) {
                    this.selected=false;
                    this.style.backgroundColor='pink';
                    this.innerHTML='';
                }else {
                    this.selected=true;
                    this.style.backgroundColor='yellow';
                    this.innerHTML='座位已选';
                }
            }
        }
    </script>
</div>
</body>
</html>